<template>
	<view class="self-container">
		<!-- 头部 -->
		<view class="my-header" v-if="userInfo">
			<view class="my-header-background">
				<image :src="userInfo.avatar?userInfo.avatar:'/static/logo.png'" mode="aspectFill"></image>
			</view>
			<view class="my-header-logo">
				<view class="my-header-logo-box" @click="changeAvatar">
					<image :src="userInfo.avatar?userInfo.avatar:'/static/logo.png'" mode="aspectFill"></image>
				</view>
				<text class="user-name">{{userInfo.nickname}}</text>
			</view>
		</view>
		<view class="my-content">
			<!-- 用户没登录的时候才展示 -->
			<view class="my-content-list" v-if="!userInfo">
				<view class="my-content-list-title" @click="goLoginPage">
					<image class="company-logo" src="../../static/logo.png" mode="aspectFill"></image>
					<text>HI,您尚未登录,请点击登录</text>
				</view>
				<uni-icons type="arrowright"></uni-icons>
			</view>
			<template v-if="userInfo">

				<view class="my-content-list">
					<view class="my-content-list-title" @click="goCertificationPage">
						<!-- #ifdef H5 -->
						<uni-icons class="icons iconfont" type="icon-zhaopin-qiyerenzheng" custom-prefix="custom-icon"
							size="16" color="#666"></uni-icons>
						<!-- #endif -->
						<!-- #ifndef H5 -->
						<text class="iconfont icon-zhaopin-qiyerenzheng"></text>
						<!-- #endif -->
						<text>企业认证</text>
					</view>
					<uni-icons type="arrowright"></uni-icons>
				</view>
				<view class="my-content-list">
					<view class="my-content-list-title" @click="personManage">
						<uni-icons class="icons" type="gear-filled" size="16" color="#666"></uni-icons>
						<text>设置</text>
					</view>
					<uni-icons type="arrowright"></uni-icons>
				</view>
				<view class="my-content-list">
					<view class="my-content-list-title" @click="passwordManage">
						<uni-icons class="icons" type="locked" size="16" color="#666"></uni-icons>
						<text>账号密码管理</text>
					</view>
					<uni-icons type="arrowright"></uni-icons>
				</view>
			</template>
			<view class="my-content-list">
				<view class="my-content-list-title" @click="goFeedbackPage">
					<uni-icons class="icons" type="help" size="16" color="#666"></uni-icons>
					<text>意见反馈</text>
				</view>
				<uni-icons type="arrowright"></uni-icons>
			</view>
			<view class="my-content-list">
				<view class="my-content-list-title" @click="goAboutUsPage">
					<uni-icons class="icons" type="contact" size="16" color="#666"></uni-icons>
					<text>关于我们</text>
				</view>
				<uni-icons type="arrowright"></uni-icons>
			</view>
			<button v-if="userInfo" @click="signOut" type="warn" class="sigin-out">退出</button>
			<uni-icons class="icons" type="icon-shenfenzhengzhengmian" custom-prefix="custom-icon" size="16"
				color="#666"></uni-icons>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		whoami
	} from "../../ajax/api/login.js";
	import {
		updateUserInfo
	} from "../../ajax/api/self.js";
	export default {
		data() {
			return {}
		},
		async onShow() {
			if (!this.userInfo) {
				// 没有用户信息，有token，需要判断token是否有效
				if (this.token) {
					try {
						const userInfo = await whoami();
						this.updateUserInfo(userInfo);
					} catch (e) {
						console.log(e)
					}

				}
			}
			if (this.userInfo?.role === 1) {
				// #ifdef MP-WEIXIN
				if (wx.hideHomeButton) {
					wx.hideHomeButton();
				}
				// #endif
			}
		},
		computed: mapState(["userInfo", "token"]),
		methods: {
			...mapMutations(["updateUserInfo"]),
			// 进入登录界面
			goLoginPage() {
				uni.navigateTo({
					url: "/pages/login/login"
				})
			},
			// 跳转到实名认证界面
			goCertificationPage() {
				uni.navigateTo({
					url: "/pages/certification/certification"
				})
			},
			// 跳转到紧急联系人管理界面
			personManage() {
				uni.navigateTo({
					url: "/pages/setUp/setUp"
				})
			},
			// 跳转到账号密码管理界面
			passwordManage() {
				uni.navigateTo({
					url: "/pages/userManage/userManage"
				})
			},
			// 跳转到关于我们的界面
			goAboutUsPage() {
				uni.navigateTo({
					url: "/pages/aboutUs/aboutUs"
				})
			},
			// 跳转到意见反馈界面
			goFeedbackPage() {
				uni.navigateTo({
					url: "/pages/feedback/feedback"
				})
			},
			// 头像修改
			changeAvatar() {
				uni.chooseImage({
					count: 1,
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: 'http://192.168.43.218:9527/api/upload',
							filePath: tempFilePaths[0],
							header: {
								'Authorization': "Bearer " + this.token
							},
							name: 'file',
							success: async (uploadFileRes) => {
								const url = "http://192.168.43.218:9527" + (JSON.parse(uploadFileRes.data)).data
								await updateUserInfo(this.userInfo._id, {
									avatar: url
								})
								this.$store.commit("updateUserInfo", {
									...this.userInfo,
									avatar: url
								})
							}
						});
					}
				});
			},
			// 退出登录
			signOut() {
				this.$store.commit("updateUserInfo", null);
				this.$store.commit("setToken", null);
				this.$store.commit("updateQiyeData",null);
				uni.removeStorageSync("userInfo")
				uni.removeStorageSync("token")
				uni.removeStorageSync("qiyeData")
				uni.switchTab({
					url: "/pages/home/home"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "./css/qiyeSelf.scss"
</style>
